<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="4" :xs="24">
				<el-input placeholder="请输入搜索词" v-model="serachKey">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
				<el-menu
					ref="siderMenu"
					default-active="科室数据报表"
					class="el-menu-vertical-demo"
					text-color="#000"
					active-text-color="#ffd04b"
					@select="handleSelect"
				>
					<el-menu-item
						v-for="(item, index) in filterSiderItem"
						style="font-size:18px"
						:index="item"
						>{{ item }}
					</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="20" :xs="24">
				<!--通用 表格 -->
				<resourceTable
					ref="resourceTable"
					:itemKey="switchTable"
					:queueStatList="queueStatList"
					:detailDocOfCounter="detailDocOfCounter"
					:queryParams="queryParams"
					@handleSelectionChange="handleSelectionChange"
					@refresh="handleQuery"
					@handleExport="handleExport"
					@pageChange="getList"
					@checkDetails="getDocDetails"
					:key="switchTable"
				></resourceTable>
			</el-col>
		</el-row>
		<!-- 添加或修改队列统计对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item
							:label="$t('calling.outpatientNumber')"
							prop="bizinfoId"
						>
							<el-input-number
								v-model="form.bizinfoId"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('calling.clinicNumber')" prop="counterId">
							<el-input-number
								v-model="form.counterId"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('calling.clinicName')" prop="counterName">
							<el-input
								v-model="form.counterName"
								:placeholder="$t('calling.clinicNameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('calling.waitPeopleNumber')"
							prop="waitNumber"
						>
							<el-input-number
								v-model="form.waitNumber"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('calling.finishProple')"
							prop="completeNumber"
						>
							<el-input-number
								v-model="form.completeNumber"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item :label="$t('calling.pastPeople')" prop="overNumber">
							<el-input-number
								v-model="form.overNumber"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							:label="$t('calling.replayPeople')"
							prop="repeatNumber"
						>
							<el-input-number
								v-model="form.repeatNumber"
								controls-position="right"
								:min="0"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('submitText')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	getQueueStat,
	delQueueStat,
	addQueueStat,
	editQueueStat,
	deptStatistical,
	deptExport,
	staffExport,
	staffStatistical,
	delCountData,
	deptStaffStatistical,
} from '@/api/qbs/queueStat'
import resourceTable from './components/resourceTable'
export default {
	name: 'QueueStat',
	components: { resourceTable },
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 队列统计表格数据
			queueStatList: {},
			// 科室下医生数据
			detailDocOfCounter: {},
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
			serachKey: '', // 左侧搜索词
			switchTable: '科室数据报表', // 切换不同表格
			// 侧边栏选项
			siderItem: ['科室数据报表', '医生数据报表'],
		}
	},
	computed: {
		// 过滤后的侧边栏选项
		filterSiderItem() {
			if (!this.serachKey) {
				return this.siderItem
			} else {
				this.$forceUpdate()
				return this.siderItem.filter((item) => item.includes(this.serachKey))
			}
		},
		// 默认选中的侧边栏选项
		defaultActive() {
			if (this.filterSiderItem.length) {
				this.switchTable = this.filterSiderItem[0]
				if (this.$refs.siderMenu) {
					this.$refs.siderMenu.updateActiveIndex()
				}
				return this.filterSiderItem[0]
			}
		},
	},
	created() {
		this.getList()
	},
	methods: {
		// 获取具体科室下医生数据
		async getDocDetails(id, query) {
			this.detailDocOfCounter = await deptStaffStatistical({
				bizinfoId: id,
				...query,
			})
		},
		// 左侧列表选中
		handleSelect(key, keyPath) {
			this.switchTable = key
			// 重置
			this.queryParams = {
				current: 1,
				size: 10,
			}
			this.getList(this.queryParams)
		},
		/** 查询队列统计列表 */
		async getList(params, key) {
			this.queryParams = params
			this.loading = true
			if (this.switchTable === '医生数据报表') {
				this.queueStatList = await staffStatistical(params)
			} else {
				this.queueStatList = await deptStatistical(params)
			}
			this.loading = false
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				bizinfoId: undefined,
				counterId: undefined,
				counterName: undefined,
				waitNumber: undefined,
				completeNumber: undefined,
				overNumber: undefined,
				repeatNumber: undefined,
				createTime: undefined,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams = {
				current: 1,
				size: 10,
			}
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams.searchTime = ''
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = this.$t('calling.addQueueStatistics')
		},
		/** 修改按钮操作 */
		handleEdit(row) {
			this.reset()
			const id = row.id || this.ids
			getQueueStat(id).then((response) => {
				this.form = response.data
				this.open = true
				this.title = this.$t('calling.changeQueueStatistics')
			})
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id !== undefined) {
						editQueueStat(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('loginLog.changeSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					} else {
						addQueueStat(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('addSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('calling.deleteQueueStatistics') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return delQueueStat(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
		/** 导出按钮操作 */
		handleExport() {
			if (this.ids.length === 0) {
				this.msgWarning(this.$t('equipment.equipmentInput'))
				return
			}
			// const queryParams = this.queryParams
			this.$confirm(
				this.$t('calling.exportQueueStatistics'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(async () => {
					if (this.switchTable === '医生数据报表') {
						return await staffExport({
							ids: this.ids.join(','),
							...this.queryParams,
						}).then((response) => {
							this.download(response.data)
						})
					} else {
						return await deptExport({
							ids: this.ids.join(','),
							...this.queryParams,
						}).then((response) => {
							this.download(response.data)
						})
					}
				})
				.catch(function() {})
		},
	},
}
</script>
